<!-- <template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">欢迎  </text>
    </view>
	 <view> <button class="action-btn" type="primary" @tap="navigateToVistPage">观众报名</button>
	  </view>
  </view>
	
	
	
  </view>
</template> -->

<template>
	<view class="container">
		<!-- 引入Header组件 -->
		<Header />
		<!-- 引入分类栏目组件 -->
		<CategoryScroll :items="items" />

		<!-- 轮播图组件 -->
		<SwiperComponent :banners="banners" @clickBannerItem="clickBannerItem" />
		<view class="layout">
			<left-column></left-column>
			<right-column></right-column>
		</view>
		<view class="news-list">
			<NewsCard v-for="(item, index) in newsList" :key="index" :title="item.title" :image="item.image"
				:description="item.description" :date="item.date" />
		</view>
	</view>
</template>

<script>
	import Header from '@/components/wrap/header.vue';
	import CategoryScroll from '@/components/wrap/categoryScroll.vue';
	import SwiperComponent from '@/components/wrap/swiper.vue';
	import LeftColumn from '@/components/wrap/LeftColumn.vue'
	import RightColumn from '@/components/wrap/RightColumn.vue'
	import NewsCard from '@/components/wrap/NewsCard.vue';


	export default {
		components: {
			Header,
			CategoryScroll,
			SwiperComponent,
			LeftColumn,
			RightColumn,
			NewsCard,
		},
		data() {
			return {
				searchKey: '',
				newsList: [{
						title: '重症医学迎来新的发展时期',
						image: '/static/images/news.png',
						description: '在近日举办的2024春季CMEF国际医疗器械博览会上，振德医疗董事长鲁建国先生向新华网的网友们...',
						date: '2024-01-01',
					},
					// 可以添加更多新闻项目
				],
				// 可以添加更多新闻项目
				banners: [{
						image: '/static/images/focus/1.png',
						title: '标题1'
					},
					{
						image: '/static/images/focus/2.png',
						title: '标题2'
					},
					{
						image: '/static/images/focus/3.png',
						title: '标题3'
					}
				],
				items: [{
						name: '健康膳食',
						icon: '/static/icon/icon1.png',
						url: '/page/column1/index'
					},
					{
						name: '健康科普',
						icon: '/static/icon/icon2.png',
						url: '/page/column2/index'
					},
					{
						name: '医学趣谈',
						icon: '/static/icon/icon3.png',
						url: '/page/column3/index'
					},
					{
						name: '医学辟谣',
						icon: '/static/icon/icon4.png',
						url: '/page/column4/index'
					},
					{
						name: '奇闻轶事',
						icon: '/static/icon/icon5.png',
						url: '/page/column5/index'
					},
					// {
					// 	name: '栏目6',
					// 	icon: '/static/icon6.png',
					// 	url: '/page/column6/index'
					// },
					// {
					// 	name: '栏目7',
					// 	icon: '/static/icon6.png',
					// 	url: '/page/column6/index'
					// },
					// {
					// 	name: '栏目8',
					// 	icon: '/static/icon6.png',
					// 	url: '/page/column6/index'
					// },
					// 继续添加更多栏目
				]
			};
		},
		methods: {
			navigateToVistPage() {
				// 使用 uni.navigateTo 跳转到 /pages/vist 页面
				uni.navigateTo({
					url: '/pages/vist/audi',
					//url: '/pages/mine/info/edit'
				});
			},

		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 10px;
		background-color: #fff;
		box-sizing: border-box;
		height: 100vh;
		/* 确保容器高度为视口高度 */
		overflow: hidden;
		/* 防止内容溢出 */
	}
	.news-list {
	  display: flex;
	  flex-direction: column;
	}

	.layout {
		display: flex;
		height: 300px;
		margin-top: 20px;
	}

	left-column {
		width: 30%;
	}

	right-column {
		width: 70%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>